<template>
  <div class="content3">
    <div class="nav bg-theme color-f text-l" >
        <div style="display:flex;flex:2;">
          <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
          <span class="font19 ml16 ">
              {{ pageTitle }}
          </span>
        </div>
        <div style="" v-show="isSearch==false">
            <van-icon name="user-circle-o" color="#eee" style="margin-right:16px" size="20px"
            @click="gotoUserCenter"/>
          </div>
    </div>
    <div style="width:100%;padding-top: 50px;">
      <div style="display:flex;padding:7px 16px 7px 16px;align-items: center;">
         <van-dropdown-menu active-color="#F07243" v-show="isSearch!=true">
            <van-dropdown-item :title="option1[dropdownvalue].text" ref="dropdownItem">
              <van-cell :style="(dropdownvalue==0?'color:#F07243':'color:#323233')" center title="最新发帖" @click="dropdownIndex('0')"></van-cell>
              <van-cell :style="(dropdownvalue==1?'color:#F07243':'color:#323233')" center title="最新回复" @click="dropdownIndex('1')"></van-cell>
              <!-- <van-cell :style="(dropdownvalue==2?'color:#F07243':'color:#323233')" center title="最多回复" @click="dropdownIndex('2')"></van-cell>
              <van-cell :style="(dropdownvalue==3?'color:#F07243':'color:#323233')" center title="最多点击" @click="dropdownIndex('3')"></van-cell> -->
            </van-dropdown-item>
          </van-dropdown-menu>
        <div style="flex:1;border:1px solid #E99D42;border-radius:18px;padding:0px 0px 0px 10px;display:flex;" :style="isSearch==true?'margin-left:0px':'margin-left:20px'">
          <input class="font12" v-model="searchTitle" placeholder="关键字搜索" style="border:none;flex:1;margin:5px">
          <div style="background:#E99D42;display:flex;align-items: center;width:50px;border-radius:18px;justify-content:center;"  @click="getCategoryList(searchTitle)">
            <van-icon name="search" size='24px'  color="#eee"/>
          </div>
        </div>    
      </div>
      <div class="cellBox">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list 
        class="cellBox"
          id="todoList"
          v-model="loading"
          :finished="finished"
          :finished-text='!haveTodoError?"没有更多数据":"" '
          :error-text="todoErromessage"
          @load="onLoad"
          style="margin-bottom: 50px;">
          <van-cell v-for="(item,index) in list" :key="index" >
              <div style="display:flex">
                <div style="flex:1"  >
                  <span style="display:inline-block;word-break: break-all;" @click="getDetail(item.id,index)" class="font16">{{item.title}}</span>
                  <div class="font12" style="display:flex;align-items:center">
                    <van-image @click="showUserInfosFun(index)" width="15px" height="15px" :src="
                        item.account.img.anonymousFilePath
                          ? getUrl(item.account.img.anonymousFilePath)
                          : ''"
                    />
                    <span v-if="item.anonymous!=true" class="ml5 ml5">{{item.account.oaAccount}}</span>
                    <span v-if="item.anonymous==true" class="ml5 ml5">{{item.account.nickname}}</span>
                    <span class="ml5">{{item.modifiedTime.substring(0,11)}}</span>
                    <span class="ml5" v-if="item.lastCommentTime">最后回复</span>
                    <span class="ml5" v-if="item.lastCommentTime">{{getDateDiff(item.lastCommentTime)}}</span>
                  </div>
                  <div style="display:flex;justify-content: space-between;width:168px;align-items:center;" class="font12"> 
                    <div class="normalColor"><van-icon name="eye-o" size="15px" />{{item.displayOrder}}</div>
                    <div class="normalColor"><van-icon name="other-pay" size="15px" />{{item.commentCount}}</div>
                    <div class="normalColor"><van-icon name="good-job-o" size="15px" :class="item.isSupport ? 'colorOrange' : 'normalColor'"/>{{item.supportVO.isSupport}}</div>
                    <div class="normalColor"><van-icon name="good-job-o" size="15px" :class="item.isOppose ? 'colorOrange' : 'normalColor'" style="transform: rotate(180deg)"/>{{item.supportVO.isOppose}}</div>
                  </div>
                </div>
              </div>
          </van-cell>
          <div v-show="!haveTodoData" class="text-c" >
              <img
                  width="100px" height="100px" 
                  :src="require('@/assets/images/pic_nodata.png')"
                  alt="暂无数据"
                  style="margin: 120px 50px 0"
                  @click="getListdata('todo')"
              />
          </div>   
          
          <div v-show="haveTodoError" class="text-c" >
              <img
                  width="100px" height="100px" 
                  :src="require('@/assets/images/pic_neterror.png')"
                  alt="获取数据失败"
                  style="margin: 120px 50px 0"
                  @click="getListdata('todo')"
              />
              <div class="color-b font14" style="margin: 20px 0 0 15px">
                  获取数据失败!
              </div>
          </div>     
        </van-list>
    </van-pull-refresh>
      </div>
    </div>
    
    <div v-if="showDrawIcon" class="middleIcon">
      <van-button @click="todraw()" round type="info" class="font14" style="height:58px;width:58px">发帖</van-button>
    </div>
    <van-popup v-if="showUserData!=[]" v-model="showUserInfos" :closed="closePopFun" position="bottom" style="border-radius:15px 15px 0 0">
        <div class="flex_center_h_sa" style="margin-top:30px">
          <img :src="this.showUserData.img?getUrl(this.showUserData.img.anonymousFilePath):''" alt="" width="50px" height="50px" style="margin-right:120px">
          <van-button v-if="showUserData.isInterested!=true" class="font14" color="#F06F3F"  size="small" style="padding:0 17px;margin-left:15px" @click="toInterested(showUserData)">关注</van-button>
          <van-button v-if="showUserData.isInterested==true" class="font14" color="#F06F3F"  size="small" @click="interestdelete(showUserData)" style="padding:0 17px;margin-left:15px">取消关注</van-button>
          <!-- <van-button class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">私信</van-button>
          <van-button class="font14" color="#F06F3F" plain size="small" style="padding:0 17px;margin-left:15px">禁言</van-button> -->
        </div>
        <div style="flex:1;display:flex;flex-direction:row;justify-content: space-around; width:90%;align-items: center;"> 
          <span class="font15 font_bold mr5" style="margin-left:20px">{{showUserData.nickname}}</span>
          <div class="centerlines"></div>   
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.noteCount}}</span>帖子</span>
          <div class="centerlines"></div>      
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.fromInterestCount}}</span>关注</span>  
          <div class="centerlines"></div>   
          <span class="font13"><span class="font13 font_bold mr5">{{showUserData.toInterestCount}}</span>粉丝</span>    
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:36px" @click="toMyWord(showUserData)">
          <span class="font16" style="flex:1">他的帖子</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:10px" @click="toMyGuanzhu(showUserData)">
          <span class="font16" style="flex:1">他的关注</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
        <div class="flex_center_h_sa box2" style="margin-top:10px" @click="toMyFans(showUserData)">
          <span class="font16" style="flex:1">他的粉丝</span>
          <van-icon name="arrow" color="#9A9A9A" size="15px"/>
        </div>
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import {findCategoryInfo,findCurrentAccount} from "@/api/colorfulLife.js";
import {findAllForum} from "@/api/colorfulLifeList.js";
import {interestdelete,interestcreate} from "@/api/gettodo";
import { openFileUrl } from '@/store/openFile'
import {Toast,Notify} from "vant"
export default {
  name: "colorfulLife",
  data() {
    return {
      active: 0,
      parentId: "UCAT585159535249256448",
      userInfo:{},//用户信息
      sidebarList: [],
      itemTitle: "",
      list:[],
      refreshing:false,
      loading:false,
      finished:false, 
      gettodoListQuery:{source:"MOBILE",page:1,rows:10,size:10,direction:'desc',properties:'isTop,modifiedTime',},
      maxpagetodo:100,
      todoErromessage:'',
      haveTodoData:true,
      haveTodoError:false,
      showUserInfos:false,
      parentCategoryId:'',
      parentCategoryName:'',
      categoryId:'',
      categoryName:'',
      showDrawIcon:true,
      showUserData:[],
      searchTitle:'',
      dropdownvalue:0,
      option1: [
        { text: '最新发帖', value: 0 },
        { text: '最新回复', value: 1 },
        // { text: '最多回复', value: 2 },
        // { text: '最多点击', value: 3 },
      ],
      searchLastCommentTime:'', //最新回复
      searchMostComment:'', //最多回复
      isSearch:false
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  activated(){
    this.showUserInfos=false
  },
  created() {
    console.log('1111111111111createdcreated')
    if (this.$route.query.title) {
      this.pageTitle = this.$route.query.title;
    }
    if(this.$route.query.searchTitle){
      this.searchTitle=this.$route.query.searchTitle
    }
    if(this.$route.query.isSearch){
      this.isSearch=this.$route.query.isSearch
    }
    console.log('isSearchisSearch'+this.isSearch)
    this.loading = true;
    this.parentId=this.$route.query.parentId
    this.parentCategoryId=this.$route.query.parentId
    if(this.parentCategoryId){
      this.showDrawIcon=true;
    }else{
      this.showDrawIcon=false;
    }
    this.itemTitle=this.$route.query.title
    this.parentCategoryName=this.$route.query.title
    this.getCurrentAccount();
    this.getCategoryList();
  },
  methods: {
    getUrl(value) {
        console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
    //获取当前账户信息
    getCurrentAccount() {
      var params = {
        userName: this.user.userName,
      };
      findCurrentAccount(params).then((res) => {
        this.userInfo = res.data.data;
      });
    },
    //获取二级栏目详细数据
    getCategoryList() {
      this.onRefresh();
    },
    onRefresh(){
        this.finished =false;
        this.loading = true;
        this.refreshing = true;
        this.gettodoListQuery.page=1;
        this.maxpagetodo=100;
        this.onLoad();
    },
    //获取话题信息
    onLoad() {
      // setTimeout(() =>{
          if(this.refreshing){
              this.list=[];
              this.refreshing =false
          }
          console.log("AAAAA"+this.user.userName)
          if(this.gettodoListQuery.page<=this.maxpagetodo){  
              var params = {
                userName: this.user.userName,
                listQuery: this.gettodoListQuery,
                fromdetaildata: {
                  categoryId: '',
                  parentCategoryId: this.parentCategoryId,
                  topicId: '',
                  title:this.searchTitle,
                  searchLastCommentTime:this.searchLastCommentTime,
                  searchMostComment:this.searchMostComment
                },
              };
              findAllForum(params)
              .then((result) =>{
                  this.haveTodoError=false;
                  if(!result.data){
                      this.loading=false;
                      this.finished=true;
                      Notify(result.message);
                      this.todoErromessage=result.message;
                      return;
                  }
                  let listdetails = this.list;
                  if(this.gettodoListQuery.page==1){
                      listdetails=[];
                      if(result.data.data.content){
                          listdetails=result.data.data.content;
                      }
                      if(listdetails.length==0){
                          this.haveTodoData=false;
                      }else{
                          this.haveTodoData=true;
                      }
                      this.maxpagetodo=result.data.data.totalPages;
                  }else{
                      if(result.data.data.content){
                          listdetails = listdetails.concat(result.data.data.content);
                      }
                  }
                  
                  this.list=listdetails;
                  this.loading =false;
                  this.gettodoListQuery.page=this.gettodoListQuery.page+1;
              })
              .catch((error) => {
                  this.loading = false
                  this.finished=true;
                  this.haveTodoData=true;
                  this.todoErromessage='获取数据失败,请稍后重试';
                  this.haveTodoError=true,
                  Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
              });
          }else{
              this.loading = false
              this.finished=true;
          }
        },
    getDateDiff(dateTimeStamp){
            var lastdate = moment(dateTimeStamp, 'YYYY-MM-DD hh:mm:ss')
            var result=''
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - lastdate;
            if(diffValue < 0){
                //若日期不符则弹出窗口告之
                //alert("结束日期不能小于开始日期！");
            }
            var monthC =diffValue/month;
            var weekC =diffValue/(7*day);
            var dayC =diffValue/day;
            var hourC =diffValue/hour;
            var minC =diffValue/minute;
            if(monthC>=1){
                result= parseInt(monthC) + "个月前";
            }
            else if(weekC>=1){
                result= parseInt(weekC) + "周前";
            }
            else if(dayC>=1){
                result= parseInt(dayC) +"天前";
            }
            else if(hourC>=1){
                result= parseInt(hourC) +"个小时前";
            }
            else if(minC>=1){
                result = parseInt(minC) +"分钟前";
            }else{
               result="刚刚";
            }
            return result;
        },
        todraw(){
          this.$router.push({
              name: "drawdetail",
              query: { 
                title:this.parentCategoryName+'-发帖',
                categoryId:'',
                categoryName:'',
                parentCategoryId:this.parentCategoryId,
                parentCategoryName:this.parentCategoryName,
                needTodo:true
              },
          });
        },
      getDetail(id,index) {
        console.log(index+'所选择的第几个');
        var titleName=''
        if(this.list[index].categoryName){
          titleName=this.list[index].parentCategoryName+'-'+this.list[index].categoryName
        }else{
          titleName=this.list[index].parentCategoryName
        }
        this.$router.push({
          path: "/newcolordetail",
          query: { 
            itemId: id ,
            title:titleName,
            },
        });
      },
      toMyWord(item){
        console.log('他的名字是'+item.oaAccount)
        this.$router.push({
          name:'myword',
          query:{
            title:'他的帖子',
            otherUser: '1',
            createUser: item.oaAccount
          }
        })
      },
      toMyGuanzhu(item){
        this.$router.push({
          name:'myguanzhu',
          query:{
            title:'他的关注',
            otherUser: '1',
            createUser: item.oaAccount
          }
        })
      },
      toMyFans(item){
        this.$router.push({
          name:'myfans',
          query:{
            title:'他的粉丝',
            otherUser: '1',
            createUser: item.oaAccount
          }
        })
      },
      showUserInfosFun(index){
        console.log('点击的图象是'+index)
        this.showUserData=this.list[index].account
        this.showUserInfos=true
      },
      closePopFun(){
        this.showUserData=[]
      },
      interestdelete(item){
          Dialog.confirm({
            title: '提示',
            message: '您确认取消关注吗？',
          })
          .then(() => {
            Toast.loading({
              message: '取消中',
              forbidClick:true
            });
            interestdelete(Object.assign({userName:this.user.userName},{toName:item.oaAccount}))
              .then((res)=>{
                Toast.clear()
                if(!res.data){
                  Notify(res.message)
                  return
                }
                if(!res.data.data&&res.data.errcode==500){
                  Notify(res.message)
                  return
                }
                Notify({type:'success',message:'取消关注成功'})
                this.showUserData=[]
                this.showUserInfos=false
                this.onRefresh()
              })
          })
          .catch(() => {
          });
        },
        toInterested(item){
          Toast.loading({
              message: '关注中',
              forbidClick:true
          });
          interestcreate(Object.assign({userName:this.user.userName},{fromName:this.userInfo.oaAccount},{toName:item.oaAccount}))
            .then((res)=>{
              Toast.clear()
              if(!res.data){
                Notify(res.message)
                return
              }
              if(!res.data.data&&res.data.errcode==500){
                Notify(res.message)
                return
              }
              Notify({type:'success',message:'关注成功'})
              this.showUserData=[]
              this.showUserInfos=false
              this.onRefresh()
            })
        },
        goBack() {
          this.$router.back(-1); //返回上一页
        },
        gotoUserCenter(){
          this.$router.push({
              name:'newcenter',
              query:{

              }
          })
        },
        dropdownIndex(value){
          this.dropdownvalue=value
          this.$refs.dropdownItem.toggle();
          if(value==0){ //最新帖子
            this.gettodoListQuery.direction='desc'
            this.gettodoListQuery.properties='isTop,modifiedTime'
            this.searchLastCommentTime=''
            this.searchMostComment=''
            this.onRefresh()
          }else if(value==1){ // 最新回复
            this.gettodoListQuery.direction=''
            this.gettodoListQuery.properties=''
            this.searchLastCommentTime='true'
            this.searchMostComment=''
            this.onRefresh()
          }
          else if(value==2){ //最多回复
            this.gettodoListQuery.direction=''
            this.gettodoListQuery.properties=''
            this.searchLastCommentTime=''
            this.searchMostComment='true'
            this.onRefresh()
          }else if(value==3){ // 最多点击
            this.gettodoListQuery.direction='desc'
            this.gettodoListQuery.properties='isTop,displayOrder'
            this.searchLastCommentTime=''
            this.searchMostComment=''
            this.onRefresh()
          }
        }
  },
};
</script>
<style scoped>
.content3 {
  display: flex;
  overflow-y: auto;
}
.cLeft {
  width: 1.46rem;
  background-color: #efefef;
  padding: 12px 0px;
}
.cRight {
  width: calc(100% - 1.46rem);
}
.avator {
  text-align: center;
}
.avator img {
  border-radius: 50%;
  margin: auto;
}
.avator hr {
  width: 90%;
  margin: 8px auto 4px;
  height: 1px;
  background-color: #c5c5c5;
  border: none;
}
.cLeft .sidebar {
  overflow-y: auto;
}
.cLeft .sidebarItem {
  width: 1.26rem;
  line-height: 1rem;
  font-size: 14px;
  border: 2px solid #c5c5c5;
  margin: 10px auto;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
}
.cLeft .activeItem {
  border: 2px solid #f76e20;
  position: relative;
}
.activeItem .dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: #f76e20;
  position: absolute;
  right: -3px;
  top: -3px;
}
.van-search .van-search__content {
  border-radius: 0.42rem;
  height: 0.84rem;
  line-height: 0.84rem;
  border: 1px solid #f76e20;
  background-color: #fff;
}
.searchBtn {
  width: 1.5rem;
  height: 0.84rem;
  background-color: #e99d42;
  text-align: center;
  color: #fff;
  font-size: 0.55rem;
  margin-left: -1.7rem;
  border-radius: 0.42rem;
}
.van-search__action:active {
  background-color: #fff;
}
.cellBox  {
  height: calc(100vh);
  overflow-y: auto;
}
.cellBox .van-cell {
  background-color: #f8f8f8;
  margin: 0.3rem 0.28rem;
  width: calc(100% - 0.56rem);
  border-radius: 3px;
  padding: 10px 10px;
}
.cellBox .van-tag {
  color: #9a9a9a;
  font-size:14px;
  /* padding: 0.1rem 0.15rem; */
}
.fz16 {
  font-size: 0.16rem;
}
.fz20 {
  font-size: 0.2rem;
}
.middleIcon{
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: center;
  margin-right: 36px;
  margin-bottom: 99px;
}
.van-button--normal {
    padding: 0 0;
    font-size: 14px;
}
.centerlines{
  width:1px;height:20px;background: #CFCFCF;margin:8px
}
.box2{
  background-color:#fff;
  border-radius:10px;
  border:1px solid #E9E9E9;
  margin:15px;
  padding:0px 20px;
  height:60px
}
.van-image__error-icon {
    color: #dcdee0;
    font-size: 15px;
}
::v-deep .van-dropdown-menu__bar{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 30px;
  background-color: #fff;
  box-shadow: none;
}
::v-deep .van-dropdown-menu__title{
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 8px 0 0;
  color: #F07243;
  font-size: 14px;
  line-height: 22px;
}
::v-deep .van-popup--top {
    top: 0;
    left: 0;
    width: 90px;
}
::v-deep .van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0);
}
</style>